<template>
  <div class="page_body">
    <div class="home_top">
      <img
        class="home_top_back"
        src="../../assets/image/black_icon01.png"
        alt="返回"
        @click="toBackFn()"
      />
      <div class="home_top_title">
        {{ stepKey == 1 ? "基本信息" : "" }}{{ stepKey == 2 ? "专业信息" : ""
        }}{{ stepKey == 3 ? "执教信息" : ""
        }}{{ stepKey == 4 ? "证件信息" : "" }}
      </div>
    </div>
    <div class="register_body">
      <div
        style="
          width: 100vw;
          display: flex;
          flex-direction: column;
          align-items: center;
        "
      >
        <div class="register_form_box">
          <!-- 基本信息栏 -->
          <div v-if="stepKey == 1">
            <div class="register_form_item border_item">
              <div class="border_item_popup_box" style="height: 100%">
                <div class="coach_register_form_upload_img">
                  <div class="border_item_title">
                    <div class="border_item_title_tips">*</div>
                    照片
                  </div>
                  <div
                    class="border_item_popup no_value_item"
                    style="width: 4.8rem; height: 0.94rem; line-height: 0.94rem"
                  >
                    请选择小不超过3M的2寸免冠照
                  </div>
                </div>

                <div class="upload_img_box">
                  <img
                    v-if="userData.photo == null || userData.photo == ''"
                    class="upload_img_box_icon"
                    src="../../assets/image/upload_img_bg03.png"
                  />
                  <img
                    v-if="userData.photo != null && userData.photo != ''"
                    class="upload_img_box_icon"
                    :src="userData.photo"
                  />
                  <input
                    type="file"
                    accept="image/*"
                    ref="uploadImg"
                    id="upload_img_btn"
                    @change="uploadImgBtn($event)"
                    :disabled="!inputKey"
                  />
                </div>
                <img
                  src="../../assets/image/to_icon03.png"
                  class="popup_icon"
                />
              </div>
            </div>

            <div class="register_form_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                姓名
              </div>
              <input
                class="register_form_item_input"
                placeholder="请输入您的姓名"
                type="text"
                v-model="userData.name"
                maxlength="6"
                :disabled="!inputKey"
              />
            </div>

            <!-- <div class="register_form_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                证件类型
              </div>
              <div
                class="border_item_popup_box"
                @click="openPopup('identityType')"
              >
                <div
                  :class="[
                    identityTypevalueObj.label == '请选择'
                      ? 'border_item_popup no_value_item'
                      : 'border_item_popup',
                  ]"
                >
                  {{ identityTypevalueObj.label }}
                </div>
                <img
                  src="../../assets/image/to_icon03.png"
                  class="popup_icon"
                />
              </div>
            </div> -->

            <div class="register_form_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                证件号
              </div>
              <input
                class="register_form_item_input"
                placeholder="请输入您的证件号"
                type="number"
                v-model="userData.identity_number"
                maxlength="30"
                :disabled="!inputKey"
              />
            </div>

            <div class="register_form_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                性别
              </div>
              <div class="border_item_popup_box" @click="openPopup('sex')">
                <div
                  :class="[
                    userData.sex == '请选择'
                      ? 'border_item_popup no_value_item'
                      : 'border_item_popup',
                  ]"
                >
                  {{ userData.sex }}
                </div>
                <img
                  src="../../assets/image/to_icon03.png"
                  class="popup_icon"
                />
              </div>
            </div>

            <div class="register_form_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                生日
              </div>
              <div class="border_item_popup_box" @click="openPopup('brith')">
                <div
                  :class="[
                    userData.brith == '请选择'
                      ? 'border_item_popup no_value_item'
                      : 'border_item_popup',
                  ]"
                >
                  {{ userData.brith }}
                </div>
                <img
                  src="../../assets/image/to_icon03.png"
                  class="popup_icon"
                />
              </div>
            </div>

            <div class="register_form_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                身高(CM)
              </div>
              <input
                class="register_form_item_input"
                placeholder="请输入您的身高"
                type="number"
                v-model="userData.height"
                maxlength="5"
                :disabled="!inputKey"
              />
            </div>

            <div class="register_form_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                体重(KG)
              </div>
              <input
                class="register_form_item_input"
                placeholder="请输入您的体重"
                type="number"
                v-model="userData.weight"
                maxlength="5"
                :disabled="!inputKey"
              />
            </div>

            <div class="register_form_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                所属区
              </div>
              <div
                class="border_item_popup_box"
                @click="openPopup('registerRegion')"
              >
                <div
                  :class="[
                    userData.coach_register_region == '请选择'
                      ? 'border_item_popup no_value_item'
                      : 'border_item_popup',
                  ]"
                >
                  {{ userData.coach_register_region }}
                </div>
                <img
                  src="../../assets/image/to_icon03.png"
                  class="popup_icon"
                />
              </div>
            </div>

            <div class="register_form_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                工作单位
              </div>
              <input
                class="register_form_item_input"
                placeholder="请输入您的工作单位"
                type="text"
                v-model="userData.company"
                maxlength="20"
                :disabled="!inputKey"
              />
            </div>

            <div class="register_form_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                职务
              </div>
              <input
                class="register_form_item_input"
                placeholder="请输入您的职位"
                type="text"
                v-model="userData.position"
                maxlength="20"
                :disabled="!inputKey"
              />
            </div>

            <div class="register_form_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                最高学历
              </div>
              <div
                class="border_item_popup_box"
                @click="openPopup('education')"
              >
                <div
                  :class="[
                    userData.education == '请选择'
                      ? 'border_item_popup no_value_item'
                      : 'border_item_popup',
                  ]"
                >
                  {{ userData.education }}
                </div>
                <img
                  src="../../assets/image/to_icon03.png"
                  class="popup_icon"
                />
              </div>
            </div>

            <div class="register_form_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                毕业院校
              </div>
              <input
                class="register_form_item_input"
                placeholder="请输入您的毕业院校"
                type="text"
                v-model="userData.school"
                maxlength="20"
                :disabled="!inputKey"
              />
            </div>

            <div class="register_form_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                毕业时间
              </div>
              <div
                class="border_item_popup_box"
                @click="openPopup('graduationDate')"
              >
                <div
                  :class="[
                    userData.graduation_date == '请选择'
                      ? 'border_item_popup no_value_item'
                      : 'border_item_popup',
                  ]"
                >
                  {{ userData.graduation_date }}
                </div>
                <img
                  src="../../assets/image/to_icon03.png"
                  class="popup_icon"
                />
              </div>
            </div>

            <div class="register_form_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                邮箱
              </div>
              <input
                class="register_form_item_input"
                placeholder="请输入您的邮箱"
                type="email"
                v-model="userData.email"
                maxlength="40"
                :disabled="!inputKey"
              />
            </div>

            <div class="register_form_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                邮寄地址
              </div>
              <input
                class="register_form_item_input"
                placeholder="请输入您的邮寄地址"
                type="text"
                v-model="userData.address"
                maxlength="30"
                :disabled="!inputKey"
              />
            </div>
          </div>

          <!-- 专业信息栏 -->
          <div v-if="stepKey == 2">
            <div class="register_form_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                培训名称
              </div>
              <div class="form_tips_s">
                请仔细核对与证书内容一致，否则无法通过审核!
              </div>
              <input
                class="register_form_item_input"
                placeholder="请输入"
                type="text"
                v-model="userData.coach_train_title"
                :disabled="!inputKey"
              />
            </div>

            <div class="register_form_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                培训时间与地点
              </div>
              <input
                class="register_form_item_input"
                placeholder="请输入"
                type="text"
                v-model="userData.coach_train_address"
                :disabled="!inputKey"
              />
            </div>

            <div class="form_title">
              <div class="border_item_title_tips">*</div>
              参加培训的证明材料
            </div>
            <div class="form_tips_s_m">
              请上传参加认证培训相关的手册、名单、教材或现场图片
            </div>
            <div class="form_tips_s">
              选择上传附件(最多5个)，限制每个5MB以内
            </div>
            <div class="form_tips_s" style="margin: 0.1rem 0 0.4rem">
              仅支持：jpg、jpeg、png、gif、bmp、psd、tif
            </div>
            <div class="coach_register_form_item">
              <div
                class="upload_file_box_noBtn"
                v-for="(item, index) in userData.coach_train_image"
                :key="index"
              >
                <img class="upload_file_box_noBtn_img" :src="item" />
                <img
                  src="../../assets/image/remove_icon01.png"
                  class="remove_icon"
                  @click="removeImg(index, 1)"
                />
              </div>

              <div
                class="upload_file_box_noBtn"
                v-if="userData.coach_train_image.length < 5"
              >
                <div class="upload_file_box_noBtn_bg">
                  <img
                    class="upload_file_box_noBtn_icon"
                    src="../../assets/image/upload_img_icon01.png"
                  />
                  <input
                    type="file"
                    accept="image/*"
                    ref="uploadCoachTrainImage"
                    class="upload_file_box_noBtn_input"
                    @change="uploadCoachTrainImageBtn($event)"
                    :disabled="!inputKey"
                  />
                </div>
              </div>
            </div>
          </div>

          <!-- 执教信息栏 -->
          <div v-if="stepKey == 3">
            <div class="register_form_item border_item">
              <div class="border_item_title" style="align-items: flex-end">
                <div class="border_item_title_tips">*</div>
                执教单位、职务及相应年份
              </div>
              <input
                class="register_form_item_input"
                placeholder="请输入"
                type="text"
                v-model="userData.coach_experience"
                :disabled="!inputKey"
              />
            </div>

            <div class="register_form_item border_item">
              <div class="border_item_title" style="align-items: flex-end">
                <div class="border_item_title_tips_ex">(选填)</div>
                期间所获成绩及荣誉
              </div>
              <input
                class="register_form_item_input"
                placeholder="请输入"
                type="text"
                v-model="userData.coach_honor"
                :disabled="!inputKey"
              />
            </div>

            <div class="form_title" style="align-items: flex-end">
              <div class="border_item_title_tips_ex">(选填)</div>
              成绩及荣誉证明材料
            </div>
            <div class="form_tips_s">
              选择上传附件(最多5个)，限制每个5MB以内
            </div>
            <div class="form_tips_s" style="margin: 0.1rem 0 0.4rem">
              仅支持：jpg、jpeg、png、gif、bmp、psd、tif
            </div>
            <div class="coach_register_form_item">
              <div
                class="upload_file_box_noBtn"
                v-for="(item, index) in userData.coach_honor_image"
                :key="index"
              >
                <img class="upload_file_box_noBtn_img" :src="item" />
                <img
                  src="../../assets/image/remove_icon01.png"
                  class="remove_icon"
                  @click="removeImg(index, 2)"
                />
              </div>

              <div
                class="upload_file_box_noBtn"
                v-if="userData.coach_honor_image.length < 5"
              >
                <div class="upload_file_box_noBtn_bg">
                  <img
                    class="upload_file_box_noBtn_icon"
                    src="../../assets/image/upload_img_icon01.png"
                  />
                  <input
                    type="file"
                    accept="image/*"
                    ref="uploadCoachHonorImage"
                    class="upload_file_box_noBtn_input"
                    @change="uploadCoachHonorImageBtn($event)"
                    :disabled="!inputKey"
                  />
                </div>
              </div>
            </div>
          </div>

          <!-- 证件信息栏 -->
          <div v-if="stepKey == 4">
            <div class="register_form_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                证书名称
              </div>
              <input
                class="register_form_item_input"
                placeholder="请输入"
                type="text"
                v-model="userData.coach_certificate_title"
                :disabled="!inpuCertificatetKey"
              />
            </div>

            <div
              class="register_form_item border_item"
              style="margin-top: 0.26rem"
            >
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                证书等级
              </div>
              <div class="form_tips_s">
                请仔细核对与证书内容一致，否则无法通过审核!
              </div>
              <input
                class="register_form_item_input"
                placeholder="请输入"
                type="text"
                v-model="userData.coach_certificate_level"
                :disabled="!inpuCertificatetKey"
              />
            </div>

            <div
              class="register_form_item border_item"
              style="margin-top: 0.26rem"
            >
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                证书编号
              </div>
              <div class="form_tips_s">
                请仔细核对与证书内容一致，否则无法通过审核!
              </div>
              <input
                class="register_form_item_input"
                placeholder="请输入"
                type="text"
                v-model="userData.coach_certificate_number"
                :disabled="!inpuCertificatetKey"
              />
            </div>

            <div class="register_form_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                证书签发日期
              </div>

              <div
                class="border_item_popup_box"
                @click="openPopup('certificateDate')"
              >
                <div
                  :class="[
                    userData.coach_certificate_date == '请选择'
                      ? 'border_item_popup no_value_item'
                      : 'border_item_popup',
                  ]"
                >
                  {{ userData.coach_certificate_date }}
                </div>
                <img
                  src="../../assets/image/to_icon03.png"
                  class="popup_icon"
                />
              </div>
            </div>

            <div class="register_form_item border_item">
              <div class="border_item_title">
                <div class="border_item_title_tips">*</div>
                发证单位
              </div>
              <input
                class="register_form_item_input"
                placeholder="请输入"
                type="text"
                v-model="userData.coach_certificate_company"
                :disabled="!inpuCertificatetKey"
              />
            </div>

            <div class="form_title">
              <div class="border_item_title_tips">*</div>
              证书图片
            </div>
            <div class="coach_register_form_item">
              <div class="upload_file_box_noBtn">
                <div
                  class="upload_file_box_noBtn_bg"
                  v-if="
                    userData.coach_certificate_image == '' ||
                    userData.coach_certificate_image == null ||
                    userData.coach_certificate_image == undefined
                  "
                >
                  <img
                    class="upload_file_box_noBtn_icon"
                    src="../../assets/image/upload_img_icon01.png"
                  />
                </div>
                <img
                  class="upload_file_box_noBtn_img"
                  v-else
                  :src="userData.coach_certificate_image"
                />
                <input
                  type="file"
                  accept="image/*"
                  ref="uploadCoachCertificateImage"
                  class="upload_file_box_noBtn_input"
                  @change="uploadCoachCertificateImageBtn($event)"
                  :disabled="!inpuCertificatetKey"
                />
              </div>
            </div>
          </div>
          <div v-if="auditStatus == 0">
            <div
              class="register_form_send_btn"
              v-if="stepKey < 3"
              @click="nextStep()"
            >
              下一步
            </div>
            <div
              class="register_form_send_btn"
              v-if="stepKey == 3"
              @click="submitDataFn(1)"
            >
              提交
            </div>
            <div
              class="register_form_send_btn"
              v-if="stepKey == 4"
              @click="submitDataFn(2)"
            >
              提交
            </div>
            <div
              class="register_form_send_btn"
              v-if="stepKey == 3"
              @click="nextStep()"
            >
              补充证件信息
            </div>
          </div>
          <div v-if="auditStatus == 2">
            <div
              class="register_form_send_btn"
              v-if="stepKey < 4"
              @click="nextStep()"
            >
              下一步
            </div>
            <div
              class="register_form_send_btn"
              v-if="stepKey == 4"
              @click="toHome()"
            >
              返回
            </div>
          </div>
          <div v-if="auditStatus == 1 || auditStatus == 3">
            <div
              class="register_form_send_btn"
              v-if="stepKey < 3 || (stepKey == 3 && isCertificate == 1)"
              @click="nextStep()"
            >
              下一步
            </div>
            <div
              class="register_form_send_btn"
              v-if="
                ((stepKey == 3 && isCertificate == 2) ||
                  (stepKey == 4 && isCertificate == 1)) &&
                !inputKey
              "
              @click="reSubmitDataFn()"
            >
              {{ auditStatus == 1 ? "审核中(重新提交)" : "审核失败(重新提交)" }}
            </div>

            <div
              class="register_form_send_btn"
              v-if="stepKey == 3 && isCertificate == 2 && inputKey"
              @click="submitDataFn(1)"
            >
              提交
            </div>
            <div
              class="register_form_send_btn"
              v-if="stepKey == 4 && inpuCertificatetKey"
              @click="submitDataFn(2)"
            >
              提交
            </div>
            <div
              class="register_form_send_btn"
              v-if="stepKey == 3 && isCertificate == 2"
              @click="nextStep()"
            >
              补充证件信息
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- popup选择器 -->
    <mt-popup
      v-model="popupVisible"
      position="bottom"
      @touchmove.native.stop.prevent
    >
      <div class="popup_body">
        <div class="popup_body_top">
          <div @click="popupCancelFn()" class="popup_body_top_cancel">取消</div>
          <div @click="popupConfirmFn()" class="popup_body_top_confirm">
            确认
          </div>
        </div>
        <mt-picker
          style="width: 100%"
          ref="popupPicker"
          :slots="pickerSlots"
          :visibleItemCount="visibleItemCount"
          :valueKey="valueKey"
          @change="onPickerChange"
        ></mt-picker>
      </div>
    </mt-popup>
    <!-- 时间选择 -->
    <mt-datetime-picker
      ref="picker"
      type="date"
      v-model="pickerValue"
      @confirm="handleConfirm"
      :startDate="startDate"
      :endDate="endDate"
      @touchmove.native.stop.prevent
    >
    </mt-datetime-picker>
  </div>
</template>
<style src="../../assets/css/coach/coachRegister.css" scoped></style>

<script>
import { MessageBox, Indicator, Toast } from "mint-ui";

export default {
  name: "CoachRegister",
  components: {},
  data() {
    return {
      baseAPIUrl: this.$store.state.baseAPIUrl,
      stepKey: 1, // 步骤条值
      userData: {
        photo: "", // 照片
        name: "", // 姓名
        identity_type: 1, // 证件类型 1：身份证 2：护照 3：港、澳、台胞证件 4：其它
        identity_number: "", // 证件号
        sex: "请选择", // 性别
        brith: "请选择", //生日
        height: "", // 身高
        weight: "", // 体重
        coach_register_region: "请选择", // 所属区
        company: "", // 工作单位
        position: "", //职位
        education: "请选择", // 最高学历
        school: "", // 毕业院校
        graduation_date: "请选择", // 毕业时间
        email: "", // 邮箱
        address: "", // 邮寄地址

        coach_train_title: "", // 培训名称
        coach_train_address: "", // 培训时间与地点
        coach_train_image: [], // 参加培训的证明材料

        coach_certificate_title: "", // 证书名称
        coach_certificate_level: "", // 证书等级
        coach_certificate_number: "", // 证书编号
        coach_certificate_date: "请选择", // 证书签发日期
        coach_certificate_company: "", // 发证单位
        coach_certificate_image: "", // 证书图片

        coach_experience: "", // 执教单位、职务及相应年份
        coach_honor: "", // 执教期间所获成绩及荣誉
        coach_honor_image: [], // 成绩及荣誉证明材料
      },
      userCoachId: "", // 教练员ID
      uploadUrl: "", // 提交用图片路径Q
      pickerValue: "", // 时间选择值
      startDate: new Date("1900-01-01"),
      endDate: new Date("2100-01-01"),
      // popup选择相关
      pickerSlots: [], // popup中Slots
      visibleItemCount: 5, // picker备选数
      popupVisible: false, // popup显示
      popupKey: "", // 当前选择器内容
      valueKey: "", // 当 values 为对象数组时，作为文本显示在 Picker 中的对应字段的字段名
      sexSlots: [
        {
          flex: 1,
          values: ["请选择", "男", "女"],
          textAlign: "center",
        },
      ], // 性别slots
      sexChange: "请选择", // 性别选择
      identityTypeSlots: [
        {
          flex: 1,
          values: ["请选择", "身份证", "护照", "港、澳、台胞证件", "其他"],
          textAlign: "center",
        },
      ], // 证件类型slots
      identityTypeChange: "请选择", // 证件类型选择
      identityTypevalueObj: {
        value: 1,
        label: "身份证",
      }, // 证件类型选择值
      registerRegionSlots: [
        {
          flex: 1,
          values: [
            "请选择",
            "黄浦区",
            "徐汇区",
            "长宁区",
            "静安区",
            "普陀区",
            "虹口区",
            "杨浦区",
            "闵行区",
            "宝山区",
            "嘉定区",
            "浦东新区",
            "金山区",
            "松江区",
            "青浦区",
            "奉贤区",
            "崇明区",
          ],
          textAlign: "center",
        },
      ], // 所属区slots
      registerRegionChange: "请选择", // 所属区选择
      educationSlots: [
        {
          flex: 1,
          values: ["请选择", "大专", "本科", "硕士研究生", "博士"],
          textAlign: "center",
        },
      ], // 学历slots
      educationChange: "请选择", // 学历选择值
      inputKey: true, // 输入控制
      inpuCertificatetKey: true, // 输入控制
      auditStatus: 0, // 审核状态
      isCertificate: 2, // 是否填写证件1：已录入 2：未录入
    };
  },
  created: function () {
    this.checkUserInfoFn();
  },
  methods: {
    // 打开popup选择
    openPopup: function (key) {
      if (this.inputKey) {
        this.popupKey = key;
        this.valueKey = "";
        if (key == "identityType") {
          this.pickerSlots = this.identityTypeSlots;
          this.$refs.popupPicker.setSlotValue(
            0,
            this.identityTypevalueObj.label
          );
          this.popupVisible = true;
        }
        if (key == "sex") {
          this.pickerSlots = this.sexSlots;
          this.$refs.popupPicker.setSlotValue(0, this.userData.sex);
          this.popupVisible = true;
        }
        if (key == "brith") {
          if (this.userData.brith == "请选择") {
            this.pickerValue = new Date("1990-01-01");
          } else {
            this.pickerValue = new Date(this.userData.brith);
          }
          this.$refs.picker.open();
        }
        if (key == "registerRegion") {
          this.pickerSlots = this.registerRegionSlots;
          this.$refs.popupPicker.setSlotValue(
            0,
            this.userData.coach_register_region
          );
          this.popupVisible = true;
        }
        if (key == "education") {
          this.pickerSlots = this.educationSlots;
          this.$refs.popupPicker.setSlotValue(0, this.userData.education);
          this.popupVisible = true;
        }
        if (key == "graduationDate") {
          if (this.userData.graduation_date == "请选择") {
            this.pickerValue = new Date("1990-01-01");
          } else {
            this.pickerValue = new Date(this.userData.graduation_date);
          }
          this.$refs.picker.open();
        }
      }
      if (key == "certificateDate" && this.inpuCertificatetKey) {
        this.popupKey = key;
        if (this.userData.coach_certificate_date == "请选择") {
          this.pickerValue = new Date("1990-01-01");
        } else {
          this.pickerValue = new Date(this.userData.coach_certificate_date);
        }
        this.$refs.picker.open();
      }
    },

    // picker选择
    onPickerChange: function (picker, values) {
      if (this.popupKey == "identityType") {
        if (values[0]) {
          if (values[0] == "") {
            this.identityTypeChange = "请选择";
          } else {
            this.identityTypeChange = values[0];
          }
        }
      }
      if (this.popupKey == "sex") {
        if (values[0]) {
          if (values[0] == "") {
            this.sexChange = "请选择";
          } else {
            this.sexChange = values[0];
          }
        }
      }
      if (this.popupKey == "registerRegion") {
        if (values[0]) {
          if (values[0] == "") {
            this.registerRegionChange = "请选择";
          } else {
            this.registerRegionChange = values[0];
          }
        }
      }
      if (this.popupKey == "education") {
        if (values[0]) {
          if (values[0] == "") {
            this.educationChange = "请选择";
          } else {
            this.educationChange = values[0];
          }
        }
      }
    },

    // popup弹窗取消
    popupCancelFn: function () {
      let key = this.popupKey;
      if (key == "identityType") {
        this.identityTypeChange = this.identityTypevalueObj.label;
      }
      if (key == "sex") {
        this.sexChange = this.userData.sex;
      }
      if (key == "registerRegion") {
        this.registerRegionChange = this.userData.coach_register_region;
      }
      if (key == "education") {
        this.educationChange = this.userData.education;
      }
      this.popupVisible = false;
    },

    // popup弹窗确认
    popupConfirmFn: function () {
      let key = this.popupKey;
      if (key == "identityType") {
        if (this.identityTypevalueObj.label != this.identityTypeChange) {
          this.userData.identity_up = "";
          this.$refs.identityUp.value = "";
          this.userData.identity_down = "";
          this.$refs.identityDown.value = "";
        }
        this.identityTypevalueObj.label = this.identityTypeChange;
        if (this.identityTypeChange === "请选择") {
          this.identityTypevalueObj.value = 0;
        } else if (this.identityTypeChange === "身份证") {
          this.identityTypevalueObj.value = 1;
        } else if (this.identityTypeChange === "护照") {
          this.identityTypevalueObj.value = 2;
        } else if (this.identityTypeChange === "港、澳、台胞证件") {
          this.identityTypevalueObj.value = 3;
        } else {
          this.identityTypevalueObj.value = 4;
        }
        this.userData.identity_type = this.identityTypevalueObj.value;
      }
      if (key == "sex") {
        this.userData.sex = this.sexChange;
      }
      if (key == "registerRegion") {
        this.userData.coach_register_region = this.registerRegionChange;
      }
      if (key == "education") {
        this.userData.education = this.educationChange;
      }
      this.popupVisible = false;
    },
    // 时间选择确认
    handleConfirm: function () {
      let key = this.popupKey;
      if (key == "brith") {
        this.userData.brith = this.formatDate(this.pickerValue);
      }
      if (key == "graduationDate") {
        this.userData.graduation_date = this.formatDate(this.pickerValue);
      }
      if (key == "certificateDate") {
        this.userData.coach_certificate_date = this.formatDate(
          this.pickerValue
        );
      }
    },

    // 提交信息
    submitDataFn: function (key) {
      let that = this;
      let url = "/mobile/completeCoachInfo";
      let data = JSON.parse(JSON.stringify(this.userData));

      if (key == 1) {
        delete data.coach_certificate_title;
        delete data.coach_certificate_level;
        delete data.coach_certificate_number;
        delete data.coach_certificate_date;
        delete data.coach_certificate_company;
        delete data.coach_certificate_image;
        if (this.userData.coach_experience == "") {
          Toast({
            message: "请先完善执教信息",
          });
          return false;
        }
      } else {
        if (
          this.userData.coach_certificate_title == "" ||
          this.userData.coach_certificate_level == "" ||
          this.userData.coach_certificate_number == "" ||
          this.userData.coach_certificate_date == "" ||
          this.userData.coach_certificate_date == "请选择" ||
          this.userData.coach_certificate_company == "" ||
          this.userData.coach_certificate_image == ""
        ) {
          Toast({
            message: "请先完善证件信息",
          });
          return false;
        }
      }

      MessageBox.confirm("确认提交?").then(() => {
        Indicator.open();
        that.axios
          .post(url, data)
          .then((response) => {
            Indicator.close();
            if (response.code == 0) {
              Toast({
                message: "提交成功",
                duration: 3000,
              });
              sessionStorage.removeItem("COACHREGISTEROBJ");
              that.$router.replace({
                name: "CoachHome",
              });
            } else {
              Toast({
                message: response.msg,
                duration: 3000,
              });
            }
          })
          .catch(function (error) {
            Indicator.close();
            console.log(error);
          });
      });
    },

    // 检查是否完善过信息
    checkUserInfoFn: function () {
      let that = this;
      let url = "/mobile/checkUserInfo";
      let data = {};
      Indicator.open();
      this.axios
        .post(url, data)
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            if (response.is_coach_register == 1) {
              that.auditStatus = response.coach_audit_status;
              if (that.auditStatus != 0) {
                that.inputKey = false;
              }
              that.getDetailDataFn(1);
            } else {
              if (response.is_complete == 2) {
                that.getDetailDataFn(2);
              } else {
                let temporary = JSON.parse(
                  sessionStorage.getItem("COACHREGISTEROBJ")
                );
                if (temporary) {
                  that.userData = temporary;
                  that.identityTypevalueObj.value = response.info.identity_type;
                  if (response.info.identity_type == 1) {
                    that.identityTypevalueObj.label = "身份证";
                  }
                  if (response.info.identity_type == 2) {
                    that.identityTypevalueObj.label = "护照";
                  }
                  if (response.info.identity_type == 3) {
                    that.identityTypevalueObj.label = "港、澳、台胞证件";
                  }
                  if (response.info.identity_type == 4) {
                    that.identityTypevalueObj.label = "其他";
                  }
                }
              }
            }
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },

    // 获取用户信息
    getDetailDataFn: function (key) {
      let that = this;
      let url = "";
      if (key == 1) {
        url = "/mobile/getCoachInfo";
      } else {
        url = "/mobile/getUserInfo";
      }
      let data = {};
      Indicator.open();
      this.axios
        .post(url, data)
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            that.userCoachId = response.info.id;

            let selectList = [
              "sex",
              "brith",
              "coach_register_region",
              "education",
              "graduation_date",
              "coach_certificate_date",
            ];

            for (let reKey in response.info) {
              let strIndex = selectList.findIndex((item) => {
                return item == reKey;
              });
              if (strIndex != -1) {
                if (
                  response.info[reKey] == null ||
                  response.info[reKey] == ""
                ) {
                  that.userData[reKey] = "请选择";
                } else {
                  that.userData[reKey] = response.info[reKey];
                }
              } else {
                that.userData[reKey] =
                  response.info[reKey] == null ? "" : response.info[reKey];
              }
            }
            that.isCertificate = response.info.is_coach_certificate_write;
            if (that.isCertificate == 1) {
              that.inpuCertificatetKey = false;
            }
            that.identityTypevalueObj.value = response.info.identity_type;
            if (response.info.identity_type == 1) {
              that.identityTypevalueObj.label = "身份证";
            }
            if (response.info.identity_type == 2) {
              that.identityTypevalueObj.label = "护照";
            }
            if (response.info.identity_type == 3) {
              that.identityTypevalueObj.label = "港、澳、台胞证件";
            }
            if (response.info.identity_type == 4) {
              that.identityTypevalueObj.label = "其他";
            }
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },

    // 上传头像图片
    uploadImgBtn: function (e) {
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 3) {
        Toast({
          message: "照片大小超过3MB",
          duration: 3000,
        });
        that.$refs.uploadImg.value = "";
      } else {
        if (file != undefined && file != null) {
          let reader = new FileReader();
          reader.onload = (res) => {
            let image = new Image();
            image.onload = function () {
              let width = image.width;
              let height = image.height;
              let cl = height / width;
              if (cl >= 1.28 && cl <= 1.52) {
                that.uploadImgFn(res.target.result);
              } else {
                that.$refs.uploadImg.value = "";
                Toast({
                  message: "照片尺寸不合规",
                  duration: 3000,
                });
              }
            };
            image.src = res.target.result;
          };
          reader.readAsDataURL(file);
        }
      }
    },

    // 上传头像图片到服务器
    uploadImgFn: function (imgData) {
      let that = this;
      let url = "/upload/uploadPhoto";
      let data = {
        source: 1,
        file: imgData,
      };
      Indicator.open("上传中...");
      this.axios
        .post(url, JSON.stringify(data))
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            if (response.is_face == 1) {
              let path = response.image;
              that.uploadUrl = response.image;
              that.userData.photo = path;
            } else {
              console.log("请上传人脸图片!");
            }
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },

    // 选择上传培训证明材料
    uploadCoachTrainImageBtn: function (e) {
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 5) {
        Toast({
          message: "照片大小超过5MB",
          duration: 3000,
        });
        that.$refs.uploadCoachTrainImage.value = "";
      } else {
        if (file != undefined && file != null) {
          let reader = new FileReader();
          reader.onload = (res) => {
            that.uploadImgFlieFn(res.target.result, 10);
          };
          reader.readAsDataURL(file);
        }
      }
    },
    // 选择上传成绩及荣誉证明材料
    uploadCoachHonorImageBtn: function (e) {
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 5) {
        Toast({
          message: "照片大小超过5MB",
          duration: 3000,
        });
        that.$refs.uploadCoachHonorImage.value = "";
      } else {
        if (file != undefined && file != null) {
          let reader = new FileReader();
          reader.onload = (res) => {
            that.uploadImgFlieFn(res.target.result, 12);
          };
          reader.readAsDataURL(file);
        }
      }
    },
    // 选择上传证书图片
    uploadCoachCertificateImageBtn: function (e) {
      let that = this;
      let file = e.target.files[0];
      if (file.size > 1024 * 1024 * 5) {
        Toast({
          message: "照片大小超过5MB",
          duration: 3000,
        });
        that.$refs.uploadCoachCertificateImage.value = "";
      } else {
        if (file != undefined && file != null) {
          let reader = new FileReader();
          reader.onload = (res) => {
            that.uploadImgFlieFn(res.target.result, 11);
          };
          reader.readAsDataURL(file);
        }
      }
    },
    // 上传图片到服务器
    uploadImgFlieFn: function (imgData, key) {
      let that = this;
      let url = "/upload/uploadImage";
      let source = key;
      let data = {
        source: source,
        img: imgData,
      };
      Indicator.open("上传中...");
      this.axios
        .post(url, JSON.stringify(data))
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            let path = response.image_path;
            if (source == 10) {
              that.userData.coach_train_image.push(path);
            }
            if (source == 12) {
              that.userData.coach_honor_image.push(path);
            }
            if (source == 11) {
              that.userData.coach_certificate_image = path;
            }
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },

    // 下一步
    nextStep: function () {
      if (this.stepKey == 1) {
        if (
          this.userData.photo == "" ||
          this.userData.name == "" ||
          this.userData.sex == "" ||
          this.userData.sex == "请选择" ||
          this.userData.brith == "" ||
          this.userData.brith == "请选择" ||
          this.userData.height == "" ||
          this.userData.weight == "" ||
          this.userData.coach_register_region == "" ||
          this.userData.coach_register_region == "请选择" ||
          this.userData.company == "" ||
          this.userData.position == "" ||
          this.userData.education == "" ||
          this.userData.education == "请选择" ||
          this.userData.school == "请选择" ||
          this.userData.graduation_date == "" ||
          this.userData.graduation_date == "请选择" ||
          this.userData.email == "请选择" ||
          this.userData.address == ""
        ) {
          Toast({
            message: "请先完善基本信息",
          });
          return false;
        } else {
          // 验证身份正则
          let idNumberText =
            /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/;
          if (!idNumberText.test(this.userData.identity_number)) {
            Toast({
              message: "身份证格式不正确",
            });
            return false;
          }
          this.stepKey = this.stepKey + 1;
        }
      } else if (this.stepKey == 2) {
        if (
          this.userData.coach_train_title == "" ||
          this.userData.coach_train_address == "" ||
          this.userData.coach_train_image.length == 0
        ) {
          Toast({
            message: "请先完善专业信息",
          });
          return false;
        }
        this.stepKey = this.stepKey + 1;
      } else if (this.stepKey == 3) {
        this.stepKey = this.stepKey + 1;
      }
    },

    // 返回
    toBackFn: function () {
      if (this.stepKey == 1) {
        this.$router.go(-1);
      } else {
        this.stepKey = this.stepKey - 1;
      }
    },
    // 返回首页
    toHome: function () {
      this.$router.go(-1);
    },
    // 格式化时间
    formatDate: function (val) {
      let d = new Date(val);
      let curr_date = d.getDate();
      let curr_month = d.getMonth() + 1;
      let curr_year = d.getFullYear();
      String(curr_month).length < 2
        ? (curr_month = "0" + curr_month)
        : curr_month;
      String(curr_date).length < 2 ? (curr_date = "0" + curr_date) : curr_date;
      let yyyyMMdd = curr_year + "-" + curr_month + "-" + curr_date;
      return yyyyMMdd;
    },
    // 移除图片
    removeImg: function (index, key) {
      if (key == 1) {
        this.userData.coach_train_image.splice(index, 1);
      } else {
        this.userData.coach_honor_image.splice(index, 1);
      }
    },
    // 重新提交
    reSubmitDataFn: function () {
      this.stepKey = 1;
      this.inputKey = true;
      this.inpuCertificatetKey = true;
    },
  },
  watch: {
    userData: {
      handler(newval) {
        sessionStorage.setItem("COACHREGISTEROBJ", JSON.stringify(newval));
      },
      deep: true,
    },
  },
};
</script>
